Ext.define('CDR.view.TariffAreaCodeConfig', {
	extend: 'Ext.form.Panel',
	alias: 'widget.tariff-areacode-config',
	layout: 'anchor',
	border: false,
	bodyPadding: 10,
	defaults: {
		labelWidth: 70,
		margin: '5 0 0 0',
		anchor: '100%'
	},
	buttonAlign: 'center',
	buttons: [{
		name: 'save',
		text: 'Save'
	}],
	items: [{
		xtype: 'hidden',
		name: 'id'
	},{
		xtype: 'container',
		layout: 'hbox',
		defaults: {
			labelWidth: 50,
			margin: '0 10 0 0',
		},
		items: [{
			xtype: 'textfield',
			fieldLabel: 'Area code',
			name: 'areaCode',
			labelWidth: 70,
			width: 200
		}, {
			xtype: 'textfield',
			fieldLabel: 'Name',
			name: 'name',
			flex: 1
		}]
	},{
		xtype: 'combo',
		fieldLabel: 'Type',
		name: 'type',
		store: Ext.create('Ext.data.Store', {
			fields:['value', 'text'],
			data: [
				{value: 'TEMPLATE', text: 'Template Code'},
				{value: 'AREACODE', text: 'Area Code'}
			]
		}),
		editable: false,
		valueField: 'value',
		displayField: 'text',
		value: 'A',
		anchor: '50%',
		listeners: {
			change: function(comp, newVal){
				var template = comp.up('form').down('combobox[name=parentAreaCodeId]');
				if(newVal === 'TEMPLATE'){
					template.disable();
				} else {
					template.enable();
				}
			}
		}
	}, {
		xtype: 'textarea',
		fieldLabel: 'Description',
		name: 'description'
	},{
		xtype: 'combo',
		fieldLabel: 'Template',
		queryMode: 'local',
		name: 'parentAreaCodeId',
		store: Ext.create('Ext.data.Store', {
			fields:['value', 'text']
		}),
		editable: false,
		valueField: 'value',
		displayField: 'text',
		anchor: '50%'
	},{
		xtype: 'fieldcontainer',
		fieldLabel: 'Rate Table',
		labelAlign: 'top',
		layout: 'fit',
		items:[{
			xtype: 'gridpanel',
			autoScroll: true,
			height: 150,
			store: Ext.create('Ext.data.Store', {
				fields:[{name: 'id', type: 'int'},'effectedDate', {name: 'firstBlock', type: 'float'}, , {name: 'secondBlock', type: 'float'}]
			}),
			tbar: [{
				text: 'Add Rate',
				name: 'add-new',
				iconCls: 'icon-add'
			}],
			columns: [{
				text: 'Effected Date',  
				dataIndex:'effectedDate', 
				xtype: 'datecolumn',
				menuDisabled: true,
				format: 'd/m/Y',
				flex: 1,
				editor: {
					xtype: 'datefield',
					format: 'd/m/Y',
					allowBlank: false
				}
			}, {
				text: 'First block',  
				dataIndex:'firstBlock', 
				editor: {
					xtype:'textfield',
					allowBlank: false
				},
				menuDisabled: true,
				flex: 1,
				renderer: function(value,style,record) {
					return value + ' VND'
				}
			}, {
				text: 'Second block',  
				dataIndex:'secondBlock', 
				editor: {
					xtype:'textfield',
					allowBlank: false
				},
				menuDisabled: true,
				flex: 1,
				renderer: function(value,style,record) {
					return value + ' VND'
				}
			},{
				header: 'Delete',  
				xtype: 'actioncolumn',
				sortable: false,
				menuDisabled: true,
				align: 'center',
				width: 50,
				items:[{
                    icon:'resources/app/images/delete.png',
                    handler: function(grid, rowIndex, colIndex) {
                        grid.store.removeAt(rowIndex);
                    }
                }]
			}],
			plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
			        clicksToEdit: 2,
			        listeners: {
			        	edit: function(editor, e){
			        	
			        	}
			        }
		    })]
		}]
	}, {
		xtype: 'panel',
		title:'Extra condition',
		name: 'extra-condition',
		collapsible: true,
		collapsed: true,
		bodyPadding: 10,
		layout: 'anchor',
		defaults: {
			anchor: '100%'
		},
		items: [{
			xtype: 'container',
			layout: 'hbox',
			defaults: {
				labelWidth: 40,
				margin: '0 5 0 0'
			},
			items: [ {
				xtype: 'combo',
				fieldLabel: 'Condition',
				name: 'condition',
				editable: false,
				labelWidth: 60,
				width: 150,
				store: Ext.create('Ext.data.Store', {
					fields: [{name: 'value'}, {name: 'text'}],
					data: [{text:'Exact', value: 'Ex'}, {text:'Start', value: 'S'}, {text: 'End', value: 'E'}]
				}),
				valueField: 'value',
				displayField: 'text',
				listeners: {
					change: function(comp, val){
						var group = comp.up('panel').down('combo[name=group]');
						if(val == 'S' || val == 'E'){
							group.enable();
						} else if(val == 'Ex'){
							group.disable();
						}
					}
				}
			},{
				xtype: 'combo',
				name: 'group',
				fieldLabel: 'Group',
				disabled: true,
				editable: false,
				store: Ext.create('Ext.data.Store', {
					fields: [{name: 'id'}, {name: 'text'}]
				}),
				queryMode: 'local',
				valueField: 'id',
				displayField: 'text',
				width: 200,
				listeners: {
					change: function(comp, val){
						
					}
				}
			}, {
				xtype: 'textfield',
				fieldLabel: 'Value',
				name: 'appendCode',
				labelWidth: 40,
				width: 150,
				listeners: {
					change: function(comp, val){
						var me = comp.up('tariff-areacode-config');
						var areaCode = me.down('textfield[name=areaCode]');
						var condition = me.down('combo[name=condition]');
						var areaCodeValue = areaCode.getValue();
						if(areaCodeValue != ''){
							if(areaCodeValue.indexOf('G') > 0){
								areaCodeValue = areaCodeValue.substring(0, areaCodeValue.indexOf('G'));
							} else if(areaCodeValue.indexOf('[') > 0){
								areaCodeValue = areaCodeValue.substring(0, areaCodeValue.indexOf('['));
							}
							if(condition.getValue() == 'Ex'){
								areaCode.setValue(areaCodeValue + '[' + val + ']');
							} else if(condition.getValue() == 'S' || condition.getValue() == 'E'){
								var group = me.down('combo[name=group]');
								if(val != '') {
									areaCode.setValue(areaCodeValue + 'G' + group.getValue() + 'P' +condition.getValue() + '(' + val + ')');
								} else {
									areaCode.setValue(areaCodeValue + 'G' + group.getValue() + 'P' +condition.getValue());
								}
							}
						}
						
					}
				}
			}]
		}]
	}],
	
	populdateValue: function(valueObject){
		var me = this;
		if(this.rendered) {
			//build group
			var currNode = CDRUtils.getTariffSelectedNode();
			if(currNode){
				//get all group but exclude curr parent node( current group)
				var groups = CDRUtils.getAllGroups(currNode.parentNode);
				me.down('combobox[name=group]').store.loadData(groups);
			}
			
			var fields = this.query('field');
			Ext.iterate(fields, function(field){
				if(valueObject[field.name] != null){
					field.setValue(valueObject[field.name]);
					if(field.name == 'areaCode' && valueObject[field.name] != '' && (valueObject[field.name].indexOf('[') > 0 || valueObject[field.name].indexOf('G') > 0)){
						if(valueObject[field.name].indexOf('G') > 0){
							var groupVal = valueObject[field.name].substring(valueObject[field.name].indexOf('G') + 1, valueObject[field.name].indexOf('P'));
							me.down('combobox[name=group]').setValue(groupVal);
							var conditionVal = valueObject[field.name].substring(valueObject[field.name].indexOf('P') + 1, valueObject[field.name].indexOf('P') + 2);
							me.down('combobox[name=condition]').setValue(conditionVal);
							var codeVal = valueObject[field.name].substring(valueObject[field.name].indexOf('(') + 1, valueObject[field.name].indexOf(')'));
							me.down('textfield[name=appendCode]').setValue(codeVal);
						} else if(valueObject[field.name].indexOf('[') > 0){
							me.down('combobox[name=condition]').setValue('Ex');
							var codeVal = valueObject[field.name].substring(valueObject[field.name].indexOf('[') + 1, valueObject[field.name].indexOf(']'));
							me.down('textfield[name=appendCode]').setValue(codeVal);
						}
						me.down('panel[name=extra-condition]').expand();
					}
				}
			});
			
			var gridData = valueObject['areaCodeRates'];
			if(gridData){
				 var grid = this.query('gridpanel')[0];
				 var store = grid.store;
				 store.removeAll(false);
				 Ext.iterate(gridData, function(r){
				 	store.add({
					 	id: r.id,
					 	effectedDate: new Date(r.effectedDate),
					 	firstBlock: r.firstBlockValue,
					 	secondBlock: r.secondBlockValue
					 });
				 });
			}
			//afwefwef
			var templateCodes = valueObject['templateCodes'];
			var template = this.query('combobox[name=parentAreaCodeId]')[0];
			if(templateCodes && templateCodes.length > 0){
				template.store.removeAll(false);
				Ext.iterate(templateCodes, function(r){
					template.store.add({
						value: r.id,
						text: r.areaCode + ' ' + r.name
					});
				});
			} 
			
			if(valueObject['parentAreaCodeId']){
				template.setValue(valueObject['parentAreaCodeId']);
			}
			
			
			
		}
	},
	
	buildExtraData: function() {
		//build grid data
		var me = this;
		var data = [];
		var store = me.down('gridpanel').store;
		store.each(function(item){
			data.push({
				id: item.data.id,
				effectedDate: Ext.Date.format(item.data.effectedDate, 'd/m/Y'),
				firstBlock: item.data.firstBlock,
				secondBlock: item.data.secondBlock
			});
		});
		return {rateValues:Ext.encode(data)};
	}
});	